<template>
	<view  style="background-color: #f8f8f8;">
		<view class="search_box">
			<view class="search_borderzz">
				<image class="sousuo" :src="photo_cdn+'/zpupload/static/zuzhi/sousuo.png'" mode=""></image>
				<input  v-model="sousuo" confirm-type="search"  class="search_input" placeholder="家谱是什么"></input>
			</view>
		</view>
		
		
		
		<view>
			<view class="" style="display: flex; justify-content: space-between; margin-left: 25rpx; margin-right: 25rpx;">
				<view class="" style="font-weight: bold; font-size: 35rpx;">
					可能感兴趣的圈子
				</view>
				<view class="" style="color: #9B9B9B;">
					更多&nbsp;>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0" :show-scrollbar="true"  style="margin-top: 15rpx;">
			<view style="display: inline-block;width: 25%; margin-right: 10rpx; margin-left: 10rpx;" v-for="(item,index) in lists.data" :key="index" >
					<view>
						<view class="">
							<image :src="photo_cdn+ item.sort.logo" style="width: 100%; height: 200rpx;border-radius: 20rpx;"></image>
						</view>
						<view class="text-ellipsisOne" style="font-weight: bold;">
							{{item.sort.name}}
						</view>
						<view class="" style="display: flex; justify-content: space-between;">
							<view class="">
								<view class="" style="display: flex;align-items: center;">
									<view class="" v-for="(item1,index) in item.users" :key="index" >
										<image :src="photo_cdn+ item1.avatar" style="width: 28rpx; height: 28rpx;border-radius: 15rpx;" ></image>
									</view>
									<view class="" style="background-color: #B13B3B; border-radius: 30rpx;font-size: 16rpx; color: #fff; display: flex; justify-content: center;align-items: center;padding-left: 15rpx; padding-right: 15rpx;">
										{{item.user_num || '0'}}人
									</view>
								</view>
							</view>							
						</view>
					</view>
			</view>				
			</scroll-view>
		</view>
		
		
		<view style="margin-left: 25rpx;" >
			<view class="" style="font-weight: bold; margin-top: 25rpx; font-size: 35rpx; ">
				圈子排行榜
			</view>
			<view style="display: flex;">
				<view  v-for="(item,index) in lists.data" :key="index" class="text-ellipsisOne" style="margin-left: 20rpx;"  :class="paihangIndex==index? 'paihangone':'paihangtow' " >
					{{item.sort.name}}
				</view>
			</view>
		</view>
		
		<view class="menu_user_list">
			<view class="" style=" border-radius: 30rpx; background-color: #fff;"v-for="(item,index) in lists.data" :key="index" >
				<itemBbs   :list="item" ></itemBbs>				
			</view>
		</view>
	</view>
</template>

<script>
	import itemBbs from "@/pages/bbs/index/components/item-bbs/item-bbs.vue";
	import {bbsGetFindSort, bbsGetBySortName} from "@/utils/api/bbs.js";
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	export default {
		components:{
			itemBbs,
		},
		data() {
			return {
				photo_cdn,
				lists:{
					data:null
				},
				showOpen:true,
				sousuo:'' ,//搜索内容
				paihangIndex:0
				

				
			}
		},
		onLoad(option) {
			console.log(option.name);
			if(option.name == undefined){
				this.getList();
			}else{
				this.getnameList(option.name);
			}
			
		},
		methods: {
			getList(e){
				bbsGetFindSort({
					page:e?e:1,
					type:1
				}).then(res=>{
					console.log(res)
					this.lists = res.data;
					
				})
			},
			getnameList(e){
				bbsGetBySortName({
					name:e
				}).then(res=>{
					console.log(res)
					this.lists = res.data;
				})
			},
			scroll: function(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	
	.paihangone{
		font-weight: bold;
		color: #000000;
	}
	
	.paihangtow{
		color: #949494;
	}
	
	
	
	.text-ellipsisOne{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.menu_user_list{
		padding: 20rpx 0;
		margin: 10rpx;
		box-shadow: 8rpx -4rpx 2rpx 2rpx #F8F8F8;
	}
	
	.search_box{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		box-sizing: border-box;
		/* #ifdef MP-WEIXIN */
		padding-right: 28%;
		/* #endif */
	}
	
	.search_borderzz{
		position:relative;
		margin: 20rpx;
		border: 1px solid $themecolor;
		height: 68rpx;
		border-radius: 33rpx;
		background:#F5F4F4;
		width: 100%;
		.search_input{
			padding-left:70rpx;
			height: 68rpx;
			line-height: 70rpx;
			color:#000000;
			font-size: 28rpx;
		}
		.sousuo{
			position: absolute;
			z-index:2;
			left: 30rpx;
			top: 20rpx;
			width: 27rpx;
			height: 27rpx;
		}
		.search_subbtn{
			position: absolute;
			right: 15rpx;
			top: 6rpx;
			z-index:2;
			width: 100rpx;
			height: 50rpx;
			line-height:50rpx;
			background: $themecolor;
			border-radius: 28rpx;
			text-align:center;
			color:#FFFFFF;
			font-size:28rpx;
		}
	}

</style>
